React Suspense: Komplexní průvodce načítáním dat a dělením kódu

React Suspense je výkonná funkce představená v React 16.6, která vám umožňuje "pozastavit" vykreslování komponent při čekání na něco, jako je načtení dat nebo stažení kódu. To poskytuje deklarativní způsob správy stavů načítání a zlepšuje uživatelskou zkušenost plynulým zpracováním asynchronních operací. Tento průvodce vás provede koncepty Suspense, jeho případy použití a praktickými příklady, jak jej implementovat ve vašich React aplikacích.

Co je React Suspense?

Suspense je React komponenta, která obaluje další komponenty a umožňuje zobrazit náhradní UI (např. načítací spinner), zatímco tyto komponenty čekají na vyřešení promise. Tento promise by mohl souviset s:

• Načítáním dat: Čekání na načtení dat z API.
• Dělením kódu: Čekání na stažení a parsování JavaScript modulů.

Před Suspense, správa stavů načítání často zahrnovala komplexní podmíněné vykreslování a manuální zpracování asynchronních operací. Suspense to zjednodušuje tím, že poskytuje deklarativní přístup, díky čemuž je váš kód čistší a udržovatelnější.

Klíčové koncepty

• Suspense komponenta: Samotná komponenta <Suspense>. Akceptuje prop fallback, který specifikuje UI, které se má zobrazit, zatímco obalené komponenty se pozastavují.
• React.lazy(): Funkce, která umožňuje dělení kódu dynamickým importem komponent. Vrací Promise, který se vyřeší, když se komponenta načte.
• Integrace Promise: Suspense se bezproblémově integruje s Promises. Když se komponenta pokusí vykreslit data z Promise, které se ještě nevyřešilo, "pozastaví" se a zobrazí náhradní UI.

Případy použití

1. Načítání dat s Suspense

Jedním z primárních případů použití pro Suspense je správa načítání dat. Místo ruční správy stavů načítání s podmíněným vykreslováním můžete použít Suspense k deklarativnímu zobrazení indikátoru načítání při čekání na příchod dat.

Příklad: Načítání uživatelských dat z API

Řekněme, že máte komponentu, která zobrazuje uživatelská data načtená z API. Bez Suspense byste mohli mít kód jako tento:

import React, { useState, useEffect } from 'react';

function UserProfile() {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/users/123');
        const data = await response.json();
        setUser(data);
      } catch (err) {
        setError(err);
      } finally {
        setIsLoading(false);
      }
    }

    fetchData();
  }, []);

  if (isLoading) {
    return <p>Načítání uživatelských dat...</p>;
  }

  if (error) {
    return <p>Chyba: {error.message}</p>;
  }

  if (!user) {
    return <p>Nejsou k dispozici žádná uživatelská data.</p>;
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
    </div>
  );
}

export default UserProfile;

Tento kód funguje, ale zahrnuje správu více stavových proměnných (isLoading, error, user) a logiku podmíněného vykreslování. S Suspense to můžete zjednodušit pomocí knihovny pro načítání dat, jako je SWR nebo TanStack Query (dříve React Query), které jsou navrženy tak, aby bezproblémově fungovaly se Suspense.

Zde je návod, jak byste mohli použít SWR se Suspense:

import React from 'react';
import useSWR from 'swr';

// Jednoduchá funkce fetcher
const fetcher = (...args) => fetch(...args).then(res => res.json());

function UserProfile() {
  const { data: user, error } = useSWR('/api/users/123', fetcher, { suspense: true });

  if (error) {
    return <p>Chyba: {error.message}</p>;
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
    </div>
  );
}

function App() {
  return (
    <Suspense fallback={<p>Načítání uživatelských dat...</p>}>
      <UserProfile />
    </Suspense>
  );
}

export default App;

V tomto příkladu:

• Používáme useSWR k načtení uživatelských dat. Možnost suspense: true říká SWR, aby vyvolal Promise, pokud data ještě nejsou k dispozici.
• Komponenta UserProfile nemusí explicitně spravovat stavy načítání nebo chyb. Jednoduše vykresluje uživatelská data, když jsou k dispozici.
• Komponenta <Suspense> zachytí Promise vyvolaný SWR a zobrazí náhradní UI (<p>Načítání uživatelských dat...</p>) při načítání dat.

Tento přístup zjednodušuje logiku komponent a usnadňuje uvažování o načítání dat.

Globální úvahy pro načítání dat:

Při vytváření aplikací pro globální publikum zvažte následující:

• Latence sítě: Uživatelé v různých geografických oblastech mohou zaznamenat různou latenci sítě. Suspense může pomoci poskytnout lepší uživatelskou zkušenost zobrazením indikátorů načítání při načítání dat ze vzdálených serverů. Zvažte použití sítě pro doručování obsahu (CDN) pro ukládání dat do mezipaměti blíže k vašim uživatelům.
• Lokalizace dat: Ujistěte se, že vaše API podporuje lokalizaci dat, což vám umožní obsluhovat data v preferovaném jazyce a formátu uživatele.
• Dostupnost API: Sledujte dostupnost a výkon vašich API z různých regionů, abyste zajistili konzistentní uživatelskou zkušenost.

2. Dělení kódu s React.lazy() a Suspense

Dělení kódu je technika pro rozdělení vaší aplikace na menší části, které lze načíst na vyžádání. To může výrazně zlepšit počáteční dobu načítání vaší aplikace, zejména u velkých a komplexních projektů.

React poskytuje funkci React.lazy() pro dělení kódu komponent. Při použití se Suspense umožňuje zobrazit náhradní UI při čekání na stažení a parsování komponenty.

Příklad: Lazy loading komponenty

import React, { Suspense, lazy } from 'react';

const OtherComponent = lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<p>Načítání...</p>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

export default MyComponent;

V tomto příkladu:

• Používáme React.lazy() k dynamickému importu OtherComponent. To vrací Promise, který se vyřeší, když se komponenta načte.
• Obalujeme <OtherComponent /> s <Suspense> a poskytujeme prop fallback.
• Zatímco se OtherComponent načítá, zobrazí se náhradní UI (<p>Načítání...</p>). Jakmile se komponenta načte, nahradí náhradní UI.

Výhody dělení kódu:

• Vylepšená počáteční doba načítání: Načtením pouze potřebného kódu pro počáteční zobrazení můžete zkrátit dobu, kterou aplikace potřebuje k interakci.
• Snížená velikost balíčku: Dělení kódu může pomoci snížit celkovou velikost JavaScript balíčku vaší aplikace, což může zlepšit výkon, zejména při připojení s nízkou šířkou pásma.
• Lepší uživatelská zkušenost: Poskytnutím rychlejšího počátečního načítání a načtením kódu pouze v případě potřeby můžete vytvořit plynulejší a responzivnější uživatelskou zkušenost.

Pokročilé techniky dělení kódu:

• Dělení kódu založené na trase: Rozdělte aplikaci na základě tras, takže každá trasa načte pouze kód, který potřebuje. To lze snadno dosáhnout pomocí knihoven jako React Router.
• Dělení kódu založené na komponentách: Rozdělte jednotlivé komponenty do samostatných částí, zejména pro velké nebo zřídka používané komponenty.
• Dynamické importy: Použijte dynamické importy v rámci svých komponent k načtení kódu na vyžádání na základě interakcí uživatelů nebo jiných podmínek.

3. Současný režim a Suspense

Suspense je klíčovou součástí současného režimu React, sady nových funkcí, které umožňují Reactu pracovat na více úkolech současně. Současný režim umožňuje Reactu upřednostňovat důležité aktualizace, přerušovat dlouho běžící úkoly a zlepšit odezvu vaší aplikace.

Se současným režimem a Suspense může React:

• Začít vykreslovat komponenty dříve, než budou k dispozici všechna data: React může začít vykreslovat komponentu, i když některé z jejích datových závislostí se stále načítají. To umožňuje Reactu zobrazit částečné UI dříve, což zlepšuje vnímaný výkon vaší aplikace.
• Přerušit a obnovit vykreslování: Pokud se objeví aktualizace s vyšší prioritou, zatímco React vykresluje komponentu, může přerušit proces vykreslování, zpracovat aktualizaci s vyšší prioritou a poté obnovit vykreslování komponenty později.
• Vyhnout se blokování hlavního vlákna: Současný režim umožňuje Reactu provádět dlouho běžící úkoly bez blokování hlavního vlákna, což může zabránit tomu, aby se UI stalo neodpovědným.

Chcete-li povolit současný režim, můžete použít API createRoot v React 18:

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');
const root = createRoot(container); // Vytvořit root.
root.render(<App />);

Osvědčené postupy pro používání Suspense

• Použijte knihovnu pro načítání dat: Zvažte použití knihovny pro načítání dat, jako je SWR nebo TanStack Query, které jsou navrženy tak, aby bezproblémově fungovaly se Suspense. Tyto knihovny poskytují funkce, jako je ukládání do mezipaměti, automatické opakování a zpracování chyb, které mohou zjednodušit logiku načítání dat.
• Poskytněte smysluplné náhradní UI: Náhradní UI by mělo jasně naznačovat, že se něco načítá. Použijte spinnery, indikátory průběhu nebo skeleton loadery k vytvoření vizuálně atraktivní a informativní načítací zkušenosti.
• Zvládněte chyby elegantně: Použijte Error Boundaries k zachycení chyb, ke kterým dochází během vykreslování. To může zabránit pádu celé vaší aplikace a poskytnout lepší uživatelskou zkušenost.
• Optimalizujte dělení kódu: Použijte dělení kódu strategicky ke zkrácení počáteční doby načítání vaší aplikace. Identifikujte velké nebo zřídka používané komponenty a rozdělte je do samostatných částí.
• Otestujte implementaci Suspense: Důkladně otestujte implementaci Suspense, abyste se ujistili, že funguje správně a že vaše aplikace zvládá stavy načítání a chyby elegantně.

Zpracování chyb s Error Boundaries

Zatímco Suspense se stará o stav *načítání*, Error Boundaries se starají o stav *chyby* během vykreslování. Error Boundaries jsou React komponenty, které zachycují chyby JavaScriptu kdekoli ve stromu podřízených komponent, protokolují tyto chyby a zobrazují náhradní UI namísto pádu celého stromu komponent.

Zde je základní příklad Error Boundary:

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Aktualizovat stav, aby se v dalším vykreslení zobrazilo náhradní UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Můžete také protokolovat chybu do služby pro hlášení chyb
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Můžete vykreslit jakékoli vlastní náhradní UI
      return <h1>Něco se pokazilo.</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

Chcete-li použít Error Boundary, obalte jej kolem komponenty, která by mohla vyvolat chybu:

import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

function App() {
  return (
    <ErrorBoundary>
      <MyComponent />
    </ErrorBoundary>
  );
}

export default App;

Kombinací Suspense a Error Boundaries můžete vytvořit robustní a odolnou aplikaci, která elegantně zvládá stavy načítání i chyby.

Příklady z reálného světa

Zde je několik příkladů z reálného světa, jak lze Suspense použít ke zlepšení uživatelské zkušenosti:

• Webové stránky elektronického obchodu: Použijte Suspense k zobrazení indikátorů načítání při načítání detailů produktu nebo obrázků. To může zabránit uživateli v zobrazení prázdné stránky při čekání na načtení dat.
• Platforma sociálních médií: Použijte Suspense k lazy load komentářů nebo příspěvků, když se uživatel posouvá dolů po stránce. To může zlepšit počáteční dobu načítání stránky a snížit množství dat, která je třeba stáhnout.
• Aplikace dashboardu: Použijte Suspense k zobrazení indikátorů načítání při načítání dat pro grafy nebo grafy. To může poskytnout plynulejší a responzivnější uživatelskou zkušenost.

Příklad: Mezinárodní platforma elektronického obchodu

Zvažte mezinárodní platformu elektronického obchodu prodávající produkty globálně. Platforma může využít Suspense a React.lazy() k:

• Lazy Load obrázků produktů: Použijte React.lazy() k načítání obrázků produktů pouze tehdy, když jsou viditelné ve viewportu. To může výrazně snížit počáteční dobu načítání stránky se seznamem produktů. Zabaľte každý lazy-loaded obrázek s <Suspense fallback={<img src="placeholder.png" alt="Načítání..." />}> k zobrazení obrázku zástupného symbolu, zatímco se načítá skutečný obrázek.
• Dělení kódu komponent specifických pro danou zemi: Pokud má platforma komponenty specifické pro danou zemi (např. formátování měny, vstupní pole adresy), použijte React.lazy() k načtení těchto komponent pouze tehdy, když uživatel vybere konkrétní zemi.
• Načítání lokalizovaných popisů produktů: Použijte knihovnu pro načítání dat, jako je SWR se Suspense, k načtení popisů produktů v preferovaném jazyce uživatele. Zobrazte indikátor načítání při načítání lokalizovaných popisů.

Závěr

React Suspense je výkonná funkce, která může výrazně zlepšit uživatelskou zkušenost vašich React aplikací. Poskytnutím deklarativního způsobu správy stavů načítání a dělení kódu Suspense zjednodušuje váš kód a usnadňuje uvažování o asynchronních operacích. Ať už vytváříte malý osobní projekt nebo velkou podnikovou aplikaci, Suspense vám může pomoci vytvořit plynulejší, responzivnější a výkonnější uživatelskou zkušenost.

Integrací Suspense s knihovnami pro načítání dat a technikami dělení kódu můžete odemknout plný potenciál Concurrent Mode Reactu a vytvořit skutečně moderní a poutavé webové aplikace. Přijměte Suspense a posuňte svůj React vývoj na další úroveň.

Další studium

• Dokumentace React Suspense
• Dokumentace SWR
• Dokumentace TanStack Query
• Oznámení React 18 (Současný režim)